<template>
  <div class="airdropDatails" @click="handleCloseDetails($event)">
    <div class="detailsCont" :class="handleClass" ref="layer">
      <img src="../../../../assets/img/activity/candyBox/candy-icon.png" alt="" class="candyIcon">
      <i class="closeBtn el-icon-close" @click="handleCloseDetails('close')"></i>
      <div class="detailsMain" :style="$store.state.app.language === 'en' ? 'padding-left: 10px; padding-right: 10px;' : ''">
        <div class="detailsImg flexc">
          <img :src="candyDetails.imageUrl" alt="">
        </div>
        <div class="detailsTop">
          <p style="font-size: 26px;">{{ candyDetails.code }}</p>
          <template v-if="$store.state.app.scatter.identity && $store.state.app.scatter.chain === 'eos' ">
            <p class="get">{{ $t(`candyBox.${candyDetails.type}`) }}</p>
            <p class="getNum">{{ candyDetails.expectCount.toFixed(candyDetails.coinDecimal) }}
              <span style="font-size: 16px; margin-left: 5px;">{{ candyDetails.code }}</span>
            </p>
          </template>
        </div>
        <div class="detailsBottom">
          <div class="flexb">
            <div class="detailCont1" :style="$store.state.app.language === 'en' ? 'width: 53%;' : ''">
              <span class="mr">{{ $t('candyBox.airdropAmount') }}:</span>
              <span>{{ moneyFormat(candyDetails.airdropCount) }} {{ candyDetails.code }}</span>
            </div>
            <div class="detailCont" :style="$store.state.app.language === 'en' ? 'width: 47%;' : ''">
              <span class="mr">{{ $t('candyBox.snapshotTime') }}:</span>
              <span>{{ `${candyDetails.snapshotTime.slice(0, 11)} 00:00` }}(UTC)</span>
            </div>
          </div>
          <div class="flexb">
            <div class="detailCont1" :style="$store.state.app.language === 'en' ? 'width: 53%;' : ''">
              <span class="mr">{{ $t('candyBox.totalCirculation') }}:</span>
              <span>{{ moneyFormat(candyDetails.publishCount) }} {{ candyDetails.code }}</span>
            </div>
            <div class="detailCont" :style="$store.state.app.language === 'en' ? 'width: 47%;' : ''">
              <span class="mr">{{ $t('candyBox.airdropTime') }}:</span>
              <span>{{ candyDetails.airdropTime | dateFormat}}</span>
            </div>
          </div>
          <!-- <div>
            <span class="mr">{{ $t('candyBox.airdropProportion') }}:</span>
            <span>{{ accMul(accDiv(candyDetails.airdropCount, candyDetails.publishCount), 100).toFixed(2) }}%</span>
          </div> -->
          <!-- <div class="clearfix rule" style="margin-bottom: 25px;">
            <span class="mr" :style="$store.state.app.language === 'en' || $store.state.app.language === 'ko' ? 'width: 18%;' : ''">
              {{ $t('candyBox.airdropRules') }}:
            </span>
            <span :style="$store.state.app.language === 'en' || $store.state.app.language === 'ko' ? 'width: 75%;' : ''">
              {{ $t('candyBox.rulsCont') }}
            </span>
          </div> -->
          <div class="clearfix rule">
            <span class="mr" :style="$store.state.app.language === 'en' || $store.state.app.language === 'ko' ? 'width: 18%;' : ''">
              {{ $t('candyBox.intro') }}:
            </span>
            <span :style="$store.state.app.language === 'en' || $store.state.app.language === 'ko' ? 'width: 76%;' : 'width: 82%;'">
              {{ candyDetails.introduction }}
            </span>
          </div>
          <div>
            <span class="mr">{{ $t('candyBox.offiAddress') }}:</span>
            <a :href="candyDetails.website" target="_blank">{{ candyDetails.website }}</a>
          </div>
          <div class="flexc" v-if="toTrade">
            <el-button class="default-sty btnbig" style="width: 180px;" @click="handleToTrade">
              {{ $t('myWallet.toTransaction') }}
            </el-button>
          </div>
          <div class="center colorThis" style="cursor: pointer; margin-top: 20px;" @click="handleToUpgrade">{{ $t('candyBox.moreToken') }} ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { accMul, accDiv, moneyFormat } from '@/utils/validate';

export default {
  name: 'airdropDatails', // 空投详情
  data() {
    return {
      toTrade: '', // 是否有上架交易对
    }
  },
  components: {},
  props: {
    candyDetails: {
      type: Object,
      default: null,
    },
  },
  watch: {},
  computed: {
    handleClass() {
      if (this.candyDetails.index % 4 === 0) {
        return 'back0';
      }

      if (this.candyDetails.index % 4 === 1) {
        return 'back1';
      }

      if (this.candyDetails.index % 4 === 2) {
        return 'back2';
      }

      return 'back3';
    },
  },
  created() {},
  mounted() {
    this.handleGetListData();
  },
  beforeDestroy() {},
  methods: {
    handleToTrade() {
      this.$router.push({
        path: `/trade/${this.toTrade.symbol}`
      });
    },
    // 获取有无交易对信息
    handleGetListData() {
      const params = {
        candyId: this.candyDetails.id
      }
      this.$http.get('/candy/info', { params }).then((res) => {
        if (res.code !== 0) {
          return;
        }
        this.toTrade = res.gotoTrade[0];
      });
    },
    handleCloseDetails(val) {
      if (!this.$refs.layer.contains(val.target) || val === 'close') {
        this.$emit('listenCloseDetails');
      }
    },
    // 升级
    handleToUpgrade() {
      this.$emit('listenToUpgrade', 0);
    },
    // 两数相乘
    accMul(num1, num2) {
      return accMul(num1, num2)
    },
    // 两数相除
    accDiv(num1, num2) {
      return accDiv(num1, num2)
    },
    // 千分位
    moneyFormat(fmoney) {
      return moneyFormat(fmoney);
    },
  },
}
</script>
<style lang="scss" scoped>
$-clolor: #278eda;
.airdropDatails{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:rgba(0, 0, 0, 0.6);
  z-index: 10000;

  .detailsCont {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 650px;
    min-height: 400px;
    padding: 60px 30px 30px 30px;
    border-radius: 5px;
    background: linear-gradient(to right, #ff9100 , #ffb700);
    color: #333;

    .candyIcon {
      position: absolute;
      bottom: -32px;
      right: -43px;
      width: 170px;
      z-index: 10000;
    }

    .detailsMain {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 10px;
      background: #fff;
      padding: 50px 20px 20px 20px;

      .detailsImg {
        position: absolute;
        left: 50%;
        top: -35px;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: #fff;
        transform: translateX(-50%);

        img {
          display: inline-block;
          vertical-align: middle;
          width: 100%;
        }
      }

      .detailsTop {
        padding-bottom: 20px;
        text-align: center;
        border-bottom: 1px dashed #e4e7ed;

        .get {
          // color: rgb(255, 150, 87);
          color: red;
          margin: 5px 0;
        }

        .getNum {
          color: red;
          font-size: 26px;
        }
      }

      .detailsBottom {
        padding: 20px 5px;

        & > div {
          margin-bottom: 10px;
        }

        .detailCont1 {
          width: 55%;
        }

        .detailCont {
          width: 45%;
        }

        .rule span:nth-child(1) {
          display: inline-block;
          width: 11.5%;
          vertical-align: top;
        }

        .rule span:nth-child(2) {
          display: inline-block;
          width: 83%;
        }
      }
    }

    .closeBtn {
      position: absolute;
      top: 5px;
      right: 5px;
      font-size: 24px;
      cursor: pointer;
      color: #fff;
    }
  }

  .back0 {
    background: linear-gradient(to right, #426DFF, #3D9EFF) !important;
  }

  .back1 {
    background: linear-gradient(to right, #F76B1C, #FF9F34) !important;
  }

  .back2 {
    background: linear-gradient(to right, #8007F9, #A54CFF) !important;
  }

  .back3 {
    background: linear-gradient(to right, #FF0A48, #FF143E) !important;
  }
}
.default-sty {
  margin: auto;
  border: 1px solid $-clolor;
  color: $-clolor;
  font-weight: normal;
}
.btnbig {
  padding: 14px 20px;
  margin: 40px 0 10px;
}
.theme-1B1D27{
  .btnbig {
    border-color: #4e5b85;
    background: transparent;
    &:hover {
      color: white;
      background: #278EDA;
    }
  }
}
</style>
